<template>
  <div class="List_container">
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/listShow' }">订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单操作</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <!--搜索区域 -->
      <el-row :gutter="20">
        <el-col :span="4">
            <el-input placeholder="请输入商品名称" size="small"></el-input>
        </el-col>
        <!-- 供应商选项框 -->
        <el-col :span="4">
          <el-select v-model="supplier" placeholder="供应商选择" size="small">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <!-- 付款选项框 -->
        <el-col :span="4">
          <el-select v-model="ispay" placeholder="是否付款" size="small">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        
        <el-col :span="2">
            <el-button type="success" size="small">搜索</el-button>
        </el-col>
        <!-- 添加商品 -->
        <el-button type="primary" size="small" class="addorder" 
        @click="addDialogVisble=true"
        >添加订单</el-button>
      </el-row> 

      <!-- 展示数据区域 -->
      <el-table :data="goodslist" stripe border >
        <!-- lable是标题  prop是内容-->
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="订单编号" prop="goodsid" align="center"></el-table-column>
        <el-table-column label="商品名称" prop="goodsname" align="center"></el-table-column>
        <el-table-column label="供应商" prop="supplier" align="center"></el-table-column>
        <el-table-column label="订单金额" prop="money" align="center"></el-table-column>
        <el-table-column label="是否付款" align="center">
          <span v-show="goodslist.ispay">已付款</span>
          <span v-show="!goodslist.ispay">未付款</span>
        </el-table-column>
        <el-table-column label="操作" align="center" width="170px">
          <!-- slot-scope里面的scope可以拿到当前点击的数据 在row里面 -->
          <template slot-scope="scope">
            <!-- 详细信息按钮 -->
            <el-tooltip :enterable="false" class="item" effect="dark" content="详细信息" placement="top">
              <el-button type="info" icon="el-icon-more" circle size="mini"
              @click="informationDialog(scope.row)"></el-button>
            </el-tooltip>
            <!-- 修改按钮 -->
            <el-tooltip :enterable="false" class="item" effect="dark" content="修改" placement="top">
              <el-button type="primary" icon="el-icon-edit" circle size="mini"
               @click="editDialog(scope.row)"></el-button>
            </el-tooltip>
            <!-- 删除按钮 -->
            <el-tooltip :enterable="false" class="item" effect="dark" content="删除" placement="top"> 
              <el-button
                type="danger" 
                icon="el-icon-delete" 
                circle size="mini" 
                style="margin-left: 10px;"
                @click="removerlistByid(scope.row.goodsid)"
                ></el-button>              
            </el-tooltip>

          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
      </el-card>

      <!-- 添加商品 -->
      <el-dialog
        title="添加商品"
        :visible.sync="addDialogVisble"
        width="50%"
        @close="addDialogClosed"
        >
        <!-- 添加内容主体区域 -->
        <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" >
          <el-form-item label="商品编码" prop="goodsid">
            <el-input v-model="addForm.goodsid"></el-input>
          </el-form-item>
          <el-form-item label="商品名称" prop="goodsname">
            <el-input v-model="addForm.goodsname"></el-input>
          </el-form-item>
          <el-form-item label="商品数量" prop="goodsnumber">
            <el-input v-model.number="addForm.goodsnumber"></el-input>
          </el-form-item>
          <el-form-item label="单价" prop="money">
            <el-input v-model.number="addForm.money"></el-input>
          </el-form-item>
          <el-form-item label="供应商" prop="supplier">
            <el-input v-model="addForm.supplier"></el-input>
          </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisble = false">取 消</el-button>
          <el-button type="primary" @click="addlist">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 修改商品 -->
      <el-dialog
        title="修改订单信息"
        :visible.sync="editDialogVisble"
        width="50%"
        @close="editDialogClosed">
        <!-- 修改的主体信息 -->
        <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">
          <!-- prop检验规则 -->
          <el-form-item label="商品订单" prop="goodsid">
            <el-input v-model="editForm.goodsid" disabled></el-input>
          </el-form-item>
          <el-form-item label="商品名称" prop="goodsname">
            <el-input v-model="editForm.goodsname" ></el-input>
          </el-form-item>
          <el-form-item label="商品数量" prop="goodsnumber">
            <el-input v-model.number="editForm.goodsnumber" ></el-input>
          </el-form-item>
          <el-form-item label="商品单价" prop="money">
            <el-input v-model.number="editForm.money" ></el-input>
          </el-form-item>
          <el-form-item label="供应商" prop="supplier">
            <el-input v-model="editForm.supplier" ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisble=false">取 消</el-button>
          <el-button type="primary" @click="editlist">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 展示商品详细信息 -->
      <el-dialog
        title="商品详细信息"
        :visible.sync="informationDialogVisble"
        width="50%"
        @close="informationDialogClosed">
        <!-- 修改的主体信息 -->
        <el-form :model="informationFrom" ref="informationRef" label-width="100px">
          <!-- prop检验规则 -->
          <el-form-item label="商品订单">
            <el-input v-model="informationFrom.goodsid" disabled></el-input>
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input v-model="informationFrom.goodsname" disabled></el-input>
          </el-form-item>
          <el-form-item label="商品数量">
            <el-input v-model.number="informationFrom.goodsnumber" disabled></el-input>
          </el-form-item>
          <el-form-item label="商品单价">
            <el-input v-model.number="informationFrom.money" disabled></el-input>
          </el-form-item>
          <el-form-item label="供应商">
            <el-input v-model="informationFrom.supplier" disabled></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="informationDialogVisble=false">取 消</el-button>
          <el-button type="primary" @click="informationDialogVisble=false">确 定</el-button>
        </span>
      </el-dialog>
    
  </div>
</template>

<script>
export default {
  name:'List',
  data(){
    return{
        // 自己的数据
        goodslist:[
          {goodsid:'g1101',goodsname:'橄榄油',supplier:'食品集团',money:780,ispay:'true',goodsnumber:20},
          {goodsid:'g1102',goodsname:'洗发水',supplier:'洗发水集团',money:70,ispay:'true',goodsnumber:100},
          {goodsid:'g1103',goodsname:'大米',supplier:'食品集团',money:80,ispay:'false',goodsnumber:500},
          {goodsid:'g1104',goodsname:'jiang油',supplier:'食品集团',money:10,ispay:'true',goodsnumber:10},
        ],
        // 供应商数据
        options1: [{
          value: '选项1',
          label: '食品集团'
        }, {
          value: '选项2',
          label: '洗发水集团'
        }, {
          value: '选项3',
          label: '苹果集团'
        }, {
          value: '选项4',
          label: '华为集团'
        }, {
          value: '选项5',
          label: '小米集团'
        }],
        supplier: '',
        // 付款单选框
        options2: [{
          value: 'true',
          label: '已付款'
        }, {
          value: 'false',
          label: '未付款'
        },],
        ispay: '',
        // 删除按钮
        visible:false,
        // 控制添加商品对话框的显示与隐藏
        addDialogVisble:false,
        // 添加用户的表单数据
        addForm:{
            goodsid:'',
            goodsname:'',
            goodsnumber:'',
            money:'',
            supplier:'',
        },
        // 添加表单的规则的验证对象
        addFormRules:{
          goodsname:[
              {required:true,message:'请输入商品名称',tirgger:'blur'}
          ],
          goodsid:[
              {required:true,message:'请输入商品编码',tirgger:'blur'}
          ],
          goodsnumber:[
              {required:true,message:'请输入商品数量'},
              { type: 'number', message: '商品数量必须为数字值'}
          ],  
          money:[
              {required:true,message:'请输入商品价格'},
              { type: 'number', message: '商品价格必须为数字值'}
          ],
          supplier:[
              {required:true,message:'请输入供应商',tirgger:'blur'}
          ],     
        },
        // 修改表单的规则的验证对象
        editFormRules:{
          goodsname:[
              {required:true,message:'请输入商品名称',tirgger:'blur'}
          ],
          goodsnumber:[
              {required:true,message:'请输入商品数量'},
              { type: 'number', message: '商品数量必须为数字值'}
          ],  
          money:[
              {required:true,message:'请输入商品价格'},
              { type: 'number', message: '商品价格必须为数字值'}
          ],
          supplier:[
              {required:true,message:'请输入供应商',tirgger:'blur'}
          ], 
        },
        // 修改订单的表格显示与隐藏
        editDialogVisble:false,
        // 修改订单的静态数据
        editForm:{},
        // 详细商品订单的表格显示与隐藏
        informationDialogVisble:false,
        // 详细信息的静态数据
        informationFrom:{}
    }
  },
  methods:{
    // 表单关闭区域
    // 添加表单的重置关闭
    addDialogClosed(){
      this.$refs.addFormRef.resetFields()
    },
    // 修改表单的重置关闭
    editDialogClosed(){
      this.$refs.editFormRef.resetFields()
    },
    // 详细详细的重置关闭
    informationDialogClosed(){
      this.$refs.informationRef.resetFields()
    },

    // 验证区域
    // 添加表单的预校验
    addlist(){
      // this.$refs.addFormRef.validate(async valid=>{
        // console.log(valid);
        // if(!valid) return
        // 可以发起添加订单的网络请求了
        // const {data:res} =await this.$http.post('list',this.addForm)
        
        // 判断添加是否成功后台给的端口返回值是否为201
        // if(res.meta.status!=201){
        //   this.$message.error('添加失败！')
        // }
        // this.$message.success('添加成功！')
        // 隐藏添加订单的对话框
        this.addDialogVisble=false
        // 重新请求数据
        // this.getUserlist()
      // })
    },
    // 修改表单的预验证
    editlist(){
      // this.$refs.editFormRules.validate(async valid=>{
      //   if(!valid) return
      //   const {data:res} =await this.$http.post('list/',this.editForm.goodsid,{
      //    goodsname:this.editForm.goodsname,
      //    goodsnumber:this.editForm.goodsnumber,
      //    money:this.editForm.money,
      //    supplier:this.editForm.supplier,
      // })
      //   if(res.meta.status!=200){
      //     this.$message.error('修改失败!')
      //   }
      //   this.$message.success('添加成功!')
        this.editDialogVisble=false
      //   this.getUserlist()
      // })
    },

    // 按钮区域
    // 修改商品的按钮
    editDialog(data){
      // axios的请求方法
    // async showeditDialog(id){ 
    //   const {data:res} =await this.$http.get('list'+id)
    //   if(res.meta.status !==200){
    //     return this.$message.error('订单查询失败')
    //   }
    //   // 成功将存入静态数据中
    //   this.editForm=res.data
      this.editForm=data
      this.editDialogVisble=true
    },
    // 展示商品详细数据
    informationDialog(data){
      this.informationFrom=data
      this.informationDialogVisble=true
    },
    // 根据id删除订单
    async removerlistByid(id){
      const confirmResult=await this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)

        // 确认删除的结果是confirm
        // 取消删除的结果是cancel
        if(confirmResult != 'confirm'){
          return this.$message.info('已取消删除')
        }
        
        // axios请求
        // const {data:res} =await this.$http.delete('list/'+id)

        // if(res.meta.status!== 200){
        //   return this.$message.error('删除失败')
        // }
        this.$message.success('确认删除')
        // this.getUsetlist()
    }
  }
}
</script>

<style lang="less" scoped>
.addorder{
  float: right;
  margin-right: 20px;
}
</style>